<template>
	<view class="job_box">
		<view class="filter" @click="filter">
			筛选
		</view>
		<u-sticky class="stick" offset-top="0" bgColor="#A2D9CE">
			<view class="tabr">
				<view class="tabr_item" :class="{active:ischeck==index}" @click="isCheck(index)"
					v-for="(item,index) in tabar" :key="item.id">{{item.text}}</view>
			</view>
			<view class="icons" @click="tosearch">
				<u-icon name="search" color="#FFF2CC" size="40"></u-icon>
			</view>
		</u-sticky>

		<view class="middle">
			<view v-for="item in getinfolist" :key="item._id">
				<workinfo :item="item"></workinfo>
			</view>
		</view>
		<!-- 弹出层 -->
		<view class="other">
			<u-popup :show="show" mode="left" :closeOnClickOverlay="true" @close="close">
				<view class='checks' style="width:450rpx;height: 100vh;;background-color:#2A5A63 ;">
					<view class="study">
						<view class="study_top">
							<text>学历</text>
						</view>
						<view class="study_body">
							<view :class="{active:isstydy==index}" @click="Isstydy(index,item.text)" class="study_item"
								v-for="(item,index) in studylist" :key="item.id">
								{{item.text}}
							</view>
						</view>
					</view>

					<view class="worktime">
						<view class="worktime_top">
							<text>工作经验</text>
						</view>
						<view class="worktime_body">
							<view :class="{active:iswork==index}" @click="Iswork(index,item.text)" class="worktime_item"
								v-for="(item,index) in worktimestudylist" :key="item.id">
								{{item.text}}
							</view>
						</view>
					</view>


					<view class="money">
						<view class="money_top">
							<text>期望工资</text>
						</view>

						<view class="money_body">
							<u--input v-model="minmoney" fontSize="20rpx" type='number' maxlength='6' class="ipt"
								color="#F7E7CE" placeholder="最低" border="surround"></u--input>
							<text class="t" style="color:#F7E7CE;font-size: 30rpx ;">-----</text>
							<u--input v-model="maxmoney" fontSize="20rpx" type='number' maxlength='6' class="ipt"
								color="#F7E7CE" placeholder="最高" border="surround"></u--input>
						</view>
					</view>

					<view class="position">
						<view class="position_top">
							<text>感兴趣的职位</text>
						</view>
						<view class="position_body">
							<uni-data-select collection="postitionlist" field="appid as value, name as text"
								@change="checkposition" label="职位选择" v-model="appid" :clear="false" />
						</view>
					</view>
					<view class="save">
						<button @click="suerinfo"
							style="width: 200rpx;color: #000;background-color: #F7E7CE;">确定</button>
					</view>
				</view>
			</u-popup>
		</view>
		<u-loadmore :status="status ? 'loading':'nomore'" />
	</view>
</template>

<!-- postitionlist -->


<script>
	const db = uniCloud.database()
	const cmd = db.command
	export default {
		data() {
			return {
				//加载状态
				status: false,
				tabar: [

					{
						id: 0,
						text: '推荐'
					},

					{
						id: 1,
						text: '最新'
					}
				],
				//ischeck标签选择
				ischeck: 0,
				show: false,
				range: [{
					appid: 0,
					text: '游戏策划'
				}],
				studylist: [{
						text: '高中',
						id: 0
					},
					{
						text: '中专',
						id: 1
					},
					{
						text: '大专',
						id: 2
					},
					{
						text: '本科',
						id: 3
					},
					{
						text: '硕士',
						id: 4
					},
					{
						text: '博士',
						id: 5
					},
					{
						text: '不限',
						id: 6
					}
				],
				worktimestudylist: [{
						text: '在校生',
						id: 0
					},

					{
						text: '应届生',
						id: 1
					},
					{
						text: '1年内',
						id: 2
					},
					{
						text: '1-3年内',
						id: 3
					},
					{
						text: '3-5年内',
						id: 4
					},
					{
						text: '5年以上',
						id: 5
					},
					{
						text: '不限',
						id: 6
					}

				],
				appid: 0,
				isstydy: 0,
				iswork: 0,
				minmoney: '',
				maxmoney: '',
				poisitions: 0,
				//获取列表信息
				getinfolist: [],
				money1: 0,
				money2: 0,
				//过滤
				skip: 0,
				//是否为筛选的过滤，0未筛选过，1筛选过
				sxfilter: 0,
				sort:'look_person desc,publish_date',
				// look_person
			};
		},
		//下拉刷新
		onPullDownRefresh() {
			console.log('垃了')
				this.pulldown()
		},
		//触底
		onReachBottom() {
			console.log(this.skip,'21222',this.sxfilter)
			if (this.sxfilter == 0) {
				//未筛选
				if (this.status==false) {
					return;
				}
				this.skip=this.skip+5
				this.getlistinfo()
			}
			if(this.sxfilter==1){
				if (this.status==false) {
					return;
				}
				this.skip=this.skip+5
				this.getotherlist()
			}
			
			console.log("触底",this.skip)
		},
		onLoad() {
			this.status = true
			this.getlistinfo()
		},
		methods: {
			//tosearch 去搜索页
			tosearch(){
				console.log('666')
				uni.navigateTo({
					url:"/pages-other/search_zp/search_zp"
				})
			},
			//下刷新
			 pulldown(){
				this.sxfilter=0
				if(this.ischeck==1){
					//最新
					this.sort='publish_date desc'
					this.status=true
					this.skip=0
					this.getinfolist=[]
					this.getlistinfo()
				}
				if(this.ischeck==0){
					//推荐
					this.sort='look_person desc,publish_date'
					this.status=true
					this.skip=0
					this.getinfolist=[]
					this.getlistinfo()
				}
			},
			//标签选择
			isCheck(e) {
				if(this.ischeck==e){
					return;
				}
				this.ischeck = e
				if(e==1){
					// 最新
					this.sort='publish_date desc'
					this.skip=0
					this.status=true
					this.getinfolist=[]
					if(this.sxfilter==1){
						//过滤过
						this.getotherlist()
						
					}else{
						this.getlistinfo()
					}
					
				}
				if(e==0){
					//推荐
					this.sort='look_person desc,publish_date'
					this.skip=0
					this.status=true
					this.getinfolist=[]
					if(this.sxfilter==1){
						//过滤过
						this.getotherlist()
						
					}else{
						this.getlistinfo()
					}
				}
				console.log(e)
			},
			//筛选框
			filter() {
				this.show = true
			},
			close() {
				this.show = false
			},
			Isstydy(index, text) {
				this.isstydy = index
				console.log(index, text)
			},
			Iswork(index, text) {
				this.iswork = index
				console.log(index, text)
			},
			//职位选择
			checkposition(e) {
				this.poisitions = e
				console.log(e)
			},
			async suerinfo() {
				this.skip=0
				this.sxfilter=1
				this.status=true
				let obj = {
					industry: this.poisitions
				}
				if (this.minmoney.trim() != "" && this.maxmoney.trim() == "") {
					obj.money = cmd.gte(Number(this.minmoney))
						
				} 
					
				if(this.minmoney.trim() == "" && this.maxmoney.trim() != ""){
					obj.money = cmd.lte(Number(this.maxmoney))
				}
				if(this.minmoney.trim() != "" && this.maxmoney.trim() != "")
				 {
					obj.money = cmd.and(cmd.gte(Number(this.minmoney)), cmd.lte(Number(this.maxmoney)))
				}
				if (this.isstydy == 6) {
					console.log('6')
				} else {
					obj.study = this.isstydy
				}
				if (this.iswork == 6) {
					console.log('7')
				} else {
					obj.work_impreance = this.iswork
				}
				console.log(obj)
				this.show = false
				let templist = db.collection("recruitment").where({
					...obj
				}).field(
					'user_id,company_id,look_person,company_id,publish_ip,user_work,industry,criticism_title,study,money,work_impreance,position_desc,publish_date,company_name,company_nums'
				).getTemp()
				let userTemp = db.collection("uni-id-users").field('_id,nickname,avatar').getTemp()
				await db.collection(templist, userTemp).orderBy(`${this.sort}`).skip(this.skip).limit(5).get().then(res => {
					this.getinfolist=[]
					if(res.result.data.length <5){
						this.status=false
					}
					if (res.result.data.length == 0) {
						//没数据了
						this.status = false
						return;
					}
					this.getinfolist =res.result.data
				})
			},
		async	getotherlist(){
			let obj = {
				industry: this.poisitions
			}
			if (this.minmoney.trim() == "" && this.maxmoney.trim() == "") {
			
			} else {
				obj.money = cmd.and(cmd.gte(Number(this.minmoney)), cmd.lte(Number(this.maxmoney)))
			}
			if (this.isstydy == 6) {
			
			} else {
				obj.study = this.isstydy
			}
			if (this.iswork == 6) {
				
			} else {
				obj.work_impreance = this.iswork
			}
			console.log(obj)
			
			let templist = db.collection("recruitment").where({
				...obj
			}).field(
				'user_id,company_id,look_person,publish_ip,company_id,user_work,industry,criticism_title,study,money,work_impreance,position_desc,publish_date,company_name,company_nums'
			).getTemp()
			let userTemp = db.collection("uni-id-users").field('_id,nickname,avatar').getTemp()
			await db.collection(templist, userTemp).orderBy(`${this.sort}`).skip(this.skip).limit(5).get().then(res => {
				if(res.result.data.length <5){
					this.status=false
				}
				if (res.result.data.length == 0) {
					//没数据了
					this.status = false
					return;
				}
				this.getinfolist = [...this.getinfolist, ...res.result.data]
			})
		},
			async getlistinfo() {

				let reTemp = db.collection("recruitment").field(
					'user_id,company_id,look_person,publish_ip,company_id,user_work,industry,criticism_title,study,money,work_impreance,position_desc,publish_date,company_name,company_nums'
				).getTemp()
				let userTemp = db.collection("uni-id-users").field('_id,nickname,avatar').getTemp()
				await db.collection(reTemp, userTemp).orderBy(`${this.sort}`).skip(this.skip).limit(5).get().then(res => {
					uni.stopPullDownRefresh()
					if(res.result.data.length <5){
						this.status=false
					}
					if (res.result.data.length == 0) {
						//没数据了
						this.status = false
						return;
					}
					this.getinfolist = [...this.getinfolist, ...res.result.data]
					console.log(res, '烦烦烦方法')
					
				})
			}
		}
	}
</script>

<style lang="scss">
	.job_box {
		/deep/ .u-sticky__content{
			display: flex;
			justify-content: space-between;
			align-items: center;
				
			.icons{
				margin-right: 20rpx;
			}
		}
		.tabr {
			margin-top: 10rpx;
			display: flex;
			align-items: center;
			padding: 10rpx;
			.tabr_item {
				color: white;
				border-radius: 50rpx;
				margin-left: 30rpx;
				text-align: center;
				width: 110rpx;
				height: 60rpx;
				background-color: #F9A826;
				font-family: '楷体';
				line-height: 60rpx;

				&.active {
					transition: all 0.2s;
					opacity: 0.5;
					width: 90rpx;
					height: 50rpx;
					line-height: 50rpx;
				}
			}
		}

		// height: 600vh;
		.filter {
			width: 120rpx;
			height: 50rpx;
			color: 30rpx;
			font-weight: 800;
			font-family: '宋体';
			font-size: 30rpx;
			text-align: center;
			line-height: 50rpx;
			background-color: #F7E7CE;
			border-radius: 0 50rpx 50rpx 0rpx;
			opacity: 0.9;
			position: fixed;
			top: 450rpx;
			z-index: 1000;
		}
		


		.info_body {
			.info_bodyy {
				.info_top {
					display: flex;
					justify-content: space-between;
					border-bottom: 2px solid #eee;

					.info_top_left {
						display: flex;

						.left {
							margin-right: 20rpx;
						}

						.right {
							.names {
								color: #1f1f1f;
								font-weight: 800;
								font-size: 35rpx;
								font-family: '楷体';
							}

							.positiosn {
								font-size: 25rpx;
								font-family: '宋体';
							}
						}
					}

					.info_top_right {
						display: flex;
						flex-direction: column;
						justify-content: center;
						font-size: 40rpx;
						color: #F9A826
					}
				}

				.info_middle {
					margin-top: 20rpx;
					display: flex;
					justify-content: space-between;

					.left {
						font-size: 35rpx;
						font-weight: 600;
						color: #000;
						font-family: "YouYuan";
					}

					.right {
						font-size: 30rpx;
					}
				}

				.needlist {
					margin-top: 20rpx;
					display: flex;

					.needlist_item {
						margin-right: 10rpx;
						background-color: #76D7C4;
						color: #000;
						width: 100rpx;
						font-size: 18rpx;
						font-family: 'YouYuan';
						text-align: center;
						border-radius: 20rpx;
						margin-bottom: 20rpx;
					}
				}

				.bottom {
					display: flex;
					justify-content: space-between;

					.time {
						font-size: 20rpx;
						font-family: '楷体';
					}

					.place {
						font-size: 30rpx;
						font-family: '宋体';
						font-weight: 600;
					}

					// margin-top: 10rpx;
				}

			}

		}

		.other {

			.checks {
				display: flex;
				flex-direction: column;
				// justify-content: ;

				.study {
					border-bottom: 2px solid #11265c;

					.study_top {
						display: flex;
						justify-content: center;
						padding: 10rpx 0;

						text {
							font-size: 30rpx;
							color: #F7E7CE;
						}
					}

					.study_body {
						display: flex;
						flex-wrap: wrap;
						padding: 10rpx;

						.study_item {

							width: 70rpx;
							height: 40rpx;
							background-color: #F7E7CE;
							text-align: center;
							line-height: 40rpx;
							font-size: 20rpx;
							font-family: 'YouYuan';
							border-radius: 30rpx;
							margin-left: 20rpx;
							margin-bottom: 20rpx;
							color: #000;

							&.active {
								opacity: 0.6;
							}
						}

					}
				}
			}

			.worktime {
				border-bottom: 2px solid #11265c;

				.worktime_top {
					display: flex;
					justify-content: center;
					padding: 10rpx 0;

					text {
						font-size: 30rpx;
						color: #F7E7CE;
					}
				}

				.worktime_body {
					display: flex;
					flex-wrap: wrap;
					padding: 10rpx;

					.worktime_item {
						width: 100rpx;
						height: 40rpx;
						background-color: #F7E7CE;
						text-align: center;
						line-height: 40rpx;
						font-size: 20rpx;
						font-family: 'YouYuan';
						border-radius: 30rpx;
						margin-left: 20rpx;
						margin-bottom: 20rpx;
						color: #000;

						&.active {
							opacity: 0.6;
						}
					}
				}
			}

			.money {
				border-bottom: 2px solid #11265c;

				.money_top {
					display: flex;
					justify-content: center;
					padding: 20rpx 0;

					text {
						font-size: 30rpx;
						color: #F7E7CE;
					}
				}

				.money_body {
					box-sizing: border-box;
					padding: 20rpx;
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					margin-top: 10rpx;
					justify-content: space-around;

					.ipt {
						flex: 2;
					}

					.t {
						flex: 2;
						text-align: center;
					}
				}
			}

			.position {
				margin-bottom: 250rpx;

				/deep/ .uni-select__input-text {
					color: #F7E7CE;
				}

				/deep/ .uni-select__selector {
					background-color: #3E4C59;
					color: #F7E7CE;
				}

				.position_top {
					padding: 20rpx 0;
					display: flex;
					justify-content: center;

					text {
						font-size: 30rpx;
						color: #F7E7CE;
					}
				}
			}
		}


	}
</style>
<style scoped>
	page {
		background-color: #A2D9CE;
	}
</style>